<template>
	<view class="content">
		<view class="skill-block">
			<view class="title-block">
				<view class="title">职位福利</view>
			</view>
			<view class="total-block">
				<view class="total">已选({{selectedList.length}}/{{max}})</view>
				<view class="box">
					<view class="total-item" :key="item.id" v-for="(item,index) in selectedList">{{item.data}}
						<view class="iconfont icon-guanbi" @click="deteteItem(index)"></view>
					</view>
				</view>
			</view>


			<view class="category">
				<view class="title">请选择职位福利</view>
				<view class="first-category-block ">
					<view :key="item.id" v-for="(item,index) in list" class="menu-item"
						@click="changeMenuSelected(item)" :class="selectedList.includes(item)?'active':''">
						{{item.data}}
					</view>
				</view>
				<view class="title">请填写职位福利</view>
				<view class="form-item">
					<input type="text" maxlength="4" class="form-ctr" v-model="form.data" />
					<view @click="addMenuSelected(form)" class="form-btn">添加</view>
				</view>
				<view class="btn-item">
					<view class="btn-save" @click="handleSave">保存</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		multipleChoiceChange
	} from '@/util/util.js'
	import {
		getWelfareListApi,
		getJobWelfareListApi
	} from '@/api/position.js'
	export default {
		data() {
			return {
				id: null,
				form: {
					data: ''
				},
				list: [],
				welfare: [0],
				selectedList: [],
				index: 0,
				max: 7,
				rules: {
					welfare: {
						name: '职位福利',
						required: true
					},
				}
			}
		},
		methods: {
			changeMenuSelected(item) {
				
				multipleChoiceChange(this.selectedList, item, this.max)
				this.welfare = multipleChoiceChange(this.welfare, item)
			},
			addMenuSelected(item) {
				console.log(item)
				if(!item.data)
				{
					this.showToast('请填写内容！');
					return
				}
				let ssr = {data: item.data}
				multipleChoiceChange(this.selectedList, ssr, this.max)
				this.welfare = multipleChoiceChange(this.welfare, ssr)
			},
			getWelfareList() {
				getWelfareListApi().then((res) => {
					this.list = res ?? [];
				})
			},
			getJobWelfareList() {
				getJobWelfareListApi({
					id: this.id
				}).then((res) => {
					this.selectedList = res ?? [];
				})
			},
			handleSave() {
				let copy = JSON.parse(JSON.stringify(this.selectedList));
				var data = "";
				for (this.index; this.index < copy.length; this.index++) {
					data += copy[this.index].data
					if (this.index + 1 < copy.length) {
						data += ','
					}
				}
				if (data.length === 0) {
					this.showToast('请至少选择一个！');
				} else {
					uni.$emit('getWelfare', data);
					uni.navigateBack()
				}
			},
			deteteItem(index) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前福利',
					success: function(res) {
						if (res.confirm) {
							that.selectedList.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id
			this.getWelfareList()
			this.getJobWelfareList()
		},
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.skill-block {
			margin-top: 40rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.title-block {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 40rpx;
					font-weight: bold;
				}
			}

			.total-block {
				display: flex;
				flex-direction: column;
				margin-top: 40rpx;
				width: 100%;

				.box {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.total-item {
						background-color: #FDEDDB;
						margin-left: 40rpx;
						color: #FE7526;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						height: 60rpx;
						border-radius: 10rpx;
						margin-top: 20rpx;
						padding: 20rpx;
					}

					.iconfont {
						margin-top: 10rpx;
						position: absolute;
						margin-left: 120rpx;
						margin-top: -23rpx;
						font-size: 20rpx;
					}
				}

			}

			.category {
				display: flex;
				flex-direction: column;
				width: 100%;

				.title {
					margin: 20rpx 0;
				}

				.first-category-block {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.menu-item {
						width: 100;
						margin-left: 30rpx;
						background-color: #FDEDDB;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						height: 50rpx;
						border-radius: 10rpx;
						margin-top: 20rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						color: #FE7526;
					}

					.menu-item.active {
						border: 1rpx solid #FE7526;
						color: #FE7526;
					}
				}

				.text {
					display: flex;
					justify-content: center;
					font-size: 28rpx;
					margin-top: 50rpx;
				}

				.form-item {
					display: flex;
					flex-direction: row;

					.form-ctr {
						width: 400rpx;
						height: 60rpx;
						border: 1rpx solid #999;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}

					.form-btn {
						width: 180rpx;
						height: 60rpx;
						border-radius: 10rpx;
						background-color: #FE7526;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.btn-item {
					display: flex;
					justify-content: center;

					.btn-save {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 140rpx;
						height: 70rpx;
						width: 420rpx;
						border-radius: 40rpx;
						margin-bottom: 20rpx;
						background-color: #FE7526;
						color: #fff;
					}
				}
			}
		}
	}
</style>
